<template>
    <div id="char" style="width:100%; height: 500px"></div>
</template>
<script lang='ts' setup>
import {onMounted} from 'vue';
// Echarts 为init（dom元素后的类型）
// EChartsOption 为 option 的类型
import {ECharts, EChartsOption, init} from 'echarts';
onMounted(() => {
  const charEle = document.getElementById('char') as HTMLElement;
  console.log()
  const charEch: ECharts = init(charEle);
  const option: EChartsOption= {
    title:{
     text:"商城销售统计"
    },
    tooltip: {
        
    },
     backgroundColor:{
        type:'radial',
    x: 0.5,
    y: 0.8,
    r: 1,
    colorStops: [
      {
        offset: 0,
        color: ' #d5e6ff'
      },
      {
        offset: 1,
        color: '#d5e6ff'
      }
    ]
     },
   xAxis: {/*X轴参数*/  
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {/*Y轴参数*/  
      type: 'value'
    },
    series: [
      {
        name:"数量",
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  charEch.setOption(option);
});
</script>